<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="pragma" content="no-cache"/>   
<meta http-equiv="Cache-Control" content="no-cache, must-revalidate"/>   
<meta http-equiv="expires" content="0"/>  
<title></title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<link href="css/select.css" rel="stylesheet" type="text/css" />
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/jquery.idTabs.min.js"></script>
<script type="text/javascript" src="js/select-ui.min.js"></script>
<script type="text/javascript" src="editor/kindeditor.js"></script>


  
<script type="text/javascript">
var pageBean = null;
var managers = {};

function detail(id){
	//	alert(JSON.stringify(managers));
	var manager = managers[id];
	$("#managerAddText").hide();	
	$("#managerAddDiv").show();	
	
	$("#managerAddSelect").val(manager.roleName).trigger("change");
	$("#managerAddText").val(manager.roleName);
	$("INPUT[name='mobile']").val(manager.mobile);
	$("#managerOperator").html("编辑");
	$("#btnSave").unbind();
	$("#btnSave").click(function(){
		var currentManager = managers[id];
		updateManager(currentManager);
	});
	$("DIV[name='managerShowList']").hide();
	$("DIV[name='managerAddForm']").show();
}

function addManager(){
	$("#managerOperator").html("添加");
	$("INPUT[name='mobile']").val('');
	$("#btnSave").unbind();
	$("#btnSave").click(saveManager);
	$("DIV[name='managerShowList']").hide();
	$("DIV[name='managerAddForm']").show();	
	$("#managerAddDiv").show();	
	$("#managerAddText").hide();

	$("#managerAddSelect").val('').trigger("change")
}

function deleteRole(id){
	 if(confirm("确定删除该管理员?")){
		var requestJson = {id:id};
		$.ajax({
	        url: '/euc/manager/delete',
	        data:JSON.stringify(requestJson),
	        beforeSend: function(request) {
	        	var accessToken = localStorage.getItem('accessToken');
	            request.setRequestHeader("accessToken",accessToken );
	        },
	        dataType: 'JSON',
	        async: true,
	        contentType:'application/json;charset=utf-8',
	        type: 'POST',
	        success: function (result, textStatus, response) {
	        	var cur = $('.paginItem.current').find("a").html();
				cur = parseInt(cur);
				search(cur);
				alert(result.message);
	        },
	        error: function () {
	        	console.log("error");
	        }  
	    });
	 }
}


function initailPageNumber(totalPage,currentPage,pageLength){				
	try{
			var midNumber = Math.ceil((pageLength-2)/2);
			var paginList = $(".paginList");
			$(paginList).empty();			
			var prev = '<li class="paginItem"><a href="javascript:;"><span class="pagepre"></span></a></li>';
			var next = '<li class="paginItem"><a href="javascript:;"><span class="pagenxt"></span></a></li>';
			if( totalPage <= pageLength - 2){
				$(prev).appendTo($(".paginList"));
				for(var i = 1; i<totalPage+1; i++){
					var pagenItem = '<li class="paginItem"><a href="javascript:;">'+i+'</a></li>';
					if(i == currentPage){
						pagenItem = '<li class="paginItem current"><a href="javascript:;">'+i+'</a></li>';
					}			
					$(pagenItem).appendTo($(".paginList"));
				}
				$(next).appendTo($(".paginList"));
			}else{				
				if(currentPage <= midNumber){
					$(prev).appendTo($(".paginList"));
					for(var i=1;i <= pageLength - 4;i++){
						var pagenItem = '<li class="paginItem"><a href="javascript:;">'+i+'</a></li>';
						if(i == currentPage){
							pagenItem = '<li class="paginItem current"><a href="javascript:;">'+i+'</a></li>';
						}			
						$(pagenItem).appendTo($(".paginList"));
					}		
					var pagenItem = '<li class="paginItem more"><a href="javascript:;">...</a></li>';
					$(pagenItem).appendTo($(".paginList"));	
					var pagenItem = '<li class="paginItem"><a href="javascript:;">'+totalPage+'</a></li>';
					$(pagenItem).appendTo($(".paginList"));	
					$(next).appendTo($(".paginList"));
				}if(totalPage - currentPage < midNumber){
					var index = totalPage;
					for(var i=1;i <= pageLength - 4;i++){
						var pagenItem = '<li class="paginItem"><a href="javascript:;">'+index+'</a></li>';
						if(index == currentPage){
							pagenItem = '<li class="paginItem current"><a href="javascript:;">'+index+'</a></li>';
						}			
						$(pagenItem).prependTo($(".paginList"));
						index--;
					}		
					var pagenItem = '<li class="paginItem more"><a href="javascript:;">...</a></li>';
					$(pagenItem).prependTo($(".paginList"));	
					var pagenItem = '<li class="paginItem"><a href="javascript:;">'+ 1 +'</a></li>';
					$(pagenItem).prependTo($(".paginList"));
					$(prev).prependTo($(".paginList"));
					
					$(next).appendTo($(".paginList"));
				}else if(totalPage - currentPage >= midNumber && currentPage > midNumber){

					pagenItem = '<li class="paginItem current"><a href="javascript:;">'+currentPage+'</a></li>';
					$(pagenItem).prependTo($(".paginList"));
					var count = midNumber - 3;
					for(var i = 1; i<=count;i++){
						pagenItem = '<li class="paginItem"><a href="javascript:;">'+ (currentPage-i)+'</a></li>';
						$(pagenItem).prependTo($(".paginList"));
						pagenItem = '<li class="paginItem"><a href="javascript:;">'+ (currentPage+i)+'</a></li>';
						$(pagenItem).appendTo($(".paginList"));
					}
					pagenItem = '<li class="paginItem more"><a href="javascript:;">...</a></li>';
					$(pagenItem).prependTo($(".paginList"));	
					pagenItem = '<li class="paginItem"><a href="javascript:;">'+1	+'</a></li>';
					$(pagenItem).prependTo($(".paginList"));
					$(prev).prependTo($(".paginList"));
					
					pagenItem = '<li class="paginItem more"><a href="javascript:;">...</a></li>';
					$(pagenItem).appendTo($(".paginList"));	
					pagenItem = '<li class="paginItem"><a href="javascript:;">'+totalPage+'</a></li>';
					$(pagenItem).appendTo($(".paginList"));	
					$(next).appendTo($(".paginList"));
				}				
			}
			$(".paginItem").click(function(){
				if($(this).hasClass("more")){
					//alert("more");
					return;
				}else if($(this).find(".pagepre").length > 0){
					var cur = $('.paginItem.current').find("a").html();
					cur = parseInt(cur);
					if(cur > 1){
						search(cur - 1);
					}
				}else if($(this).find(".pagenxt").length > 0 ){
					var cur = $('.paginItem.current').find("a").html();
					cur = parseInt(cur);
					if(cur < totalPage){
						search(cur + 1);
					}
				}else{
					var cur = $(this).find("a").html();
					cur = parseInt(cur);
					search(cur);
				}
			});
	}catch(e){/*alert(e.messge);*/}	
}


function search(currentPage){	
	var role = $("#managerListSelect").val();
	var requestJson = {currentPage:currentPage,data:{"roleId":role,"roleName":role}};		
	$.ajax({
        url: '/euc/manager/query',
        data:JSON.stringify(requestJson),
        beforeSend: function(request) {
        	var accessToken = localStorage.getItem('accessToken');
            request.setRequestHeader("accessToken",accessToken );
        },	
        dataType: 'JSON',
        async: true,
        contentType:'application/json;charset=utf-8',
        type: 'POST',
        success: function (result, textStatus, response) {
        	//	alert(JSON.stringify(result));
        	pageBean = result.data;
        	$("#managerTable").empty();	        	
        	$.each(result.data.list,function(i,data){
        		var html = '<tr>';
        		html += '<td style="width:5%;min-width:40px;">' + (i+1) + '</td>';
        		html += '<td style="width:10%;">' + data.roleName + '</td>';
        		html += '<td style="width:10%;">' + data.name + '</td>';
        		html += '<td style="width:10%;">' + data.mobile + '</td>';
        		html += '<td style="width:35%;">' + data.functionNames + '</td>';
        		html += '<td style="width:15%;">' + data.createTime + '</td>';
        		html += '<td style="width:15%;"><a href="javascript:detail('+data.id+');" class="tablelink">编辑</a>&nbsp;&nbsp;&nbsp;<a href="javascript:deleteRole('+data.id+');" class="tablelink">删除</a></td>';
        		html += '</tr>';
	        	$("#managerTable").append(html);
	        	managers[data.id] = data;
			});
        	
        	$("#totalRow").html(pageBean.totalRow+'&nbsp;');
        	$("#currentPage").html(pageBean.currentPage+'&nbsp;');
        	$("#pageSize").html(pageBean.pageSize+'&nbsp;');        	
        	var pageLength = 15;
        	initailPageNumber(pageBean.totalPage,pageBean.currentPage,pageLength);        	
        },
        error: function () {
        	alert("error");
        }  
    });
}

function initailRoleTypeSelect(){	
	$.ajax({
        url: '/euc/role/type',
        data:'',
        beforeSend: function(request) {
        	var accessToken = localStorage.getItem('accessToken');
            request.setRequestHeader("accessToken",accessToken );
        },
        dataType: 'JSON',
        async: true,
        contentType:'application/json;charset=utf-8',
        type: 'POST',
        success: function (result, textStatus, response) {
        	//alert(JSON.stringify(result));
        	$(".select1").empty();
        	$('<option value="" selected>请选择</option>').appendTo($(".select1"));
        	$.each(result,function(index,role){	
        		$('<option value="'+ role.roleName +'">'+ role.roleName +'</option>').appendTo($(".select1"));
			});
        	$(".select1").val("").trigger("change");
        },
        error: function () {
        	alert("error");
        }  
    });	
}

$(document).ready(function(e) {	
    $(".select1").uedSelect({
		width : 345			  
	});
    $("#managerAddText").hide();
	$("#add").click(addManager);	
	initailRoleTypeSelect();
	search(1);	
});
</script>
</head>

<body>

	<div class="place" name="managerShowList">
    	<span>位置：</span>
    	<ul class="placeul">
		    <li><a href="#">权限管理</a></li>
		    <li><a href="/euc/page/managerList.html">管理员</a></li>
    	</ul>
    </div>
    
    <div class="formbody" name="managerShowList">
    
    <div class="tools">    
    	<ul class="toolbar">
	        <li class="click" id="add"><span><img src="images/t01.png" /></span>添加</li>
        </ul>
        <ul class="seachform">  
	    	<li>
	    		<label>&nbsp;&nbsp;&nbsp;&nbsp;管理员类型：</label>
    		    <div class="vocation">
				    <select class="select1" id="managerListSelect">
						<option value="" selected>请选择</option>
				    </select>
			    </div>
	    	</li>    
	    	<li><label>&nbsp;</label><input name="" onclick="search(1);" type="button" class="scbtn" value="查询"/></li>    
	    </ul>
    </div>
    
    
    <div id="usual1" class="usual"> 
  	
  	<div id="tab2" class="tabson">
    
	<table class="tablelist">
    	<thead>
	    	<tr>
		        <th>序号</th>
		        <th>角色类型<i class="sort"><img src="images/px.gif" /></i></th>
		        <th>姓名</th>
		        <th>手机号</th>
		        <th>权限</th>
		        <th>创建时间</th>
		        <th>操作</th>
	        </tr>
        </thead>
        <tbody id="managerTable">
        <!-- 
	        <tr>
		        <td><input name="" type="checkbox" value="" /></td>
		        <td>20130908</td>
		        <td>王金平幕僚：马英九声明字字见血 人活着没意思</td>
		        <td>admin</td>
		        <td>江苏南京</td>
		        <td>2013-09-09 15:05</td>
		        <td>已审核</td>
		        <td><a href="#" class="tablelink">查看</a>     <a href="#" class="tablelink"> 删除</a></td>
	        </tr> 
	    -->
        </tbody>
    </table>
    
    
    <div class="pagin">    
    	<div class="message">共<i id="totalRow" class="blue">0</i>条记录，每页<i id="pageSize" class="blue">2&nbsp;</i>条记录，当前显示第&nbsp;<i id="currentPage" class="blue">2&nbsp;</i>页</div>
        <ul class="paginList" >
	        <li class="paginItem"><a href="javascript:;"><span class="pagepre"></span></a></li>
	        <li class="paginItem"><a href="javascript:;">1</a></li>
	        <li class="paginItem current"><a href="javascript:;">2</a></li>
	        <li class="paginItem more"><a href="javascript:;">...</a></li>
	        <li class="paginItem"><a href="javascript:;">4</a></li>
	        <li class="paginItem"><a href="javascript:;">5</a></li>
	        <li class="paginItem"><a href="javascript:;">6</a></li>
	        <li class="paginItem"><a href="javascript:;">7</a></li>
	        <li class="paginItem"><a href="javascript:;">8</a></li>
	        <li class="paginItem"><a href="javascript:;">9</a></li>
	        <li class="paginItem"><a href="javascript:;">10</a></li>
	        <li class="paginItem more"><a href="javascript:;">...</a></li>
	        <li class="paginItem"><a href="javascript:;">110</a></li>
	        <li class="paginItem"><a href="javascript:;">111</a></li>
	        <li class="paginItem"><a href="javascript:;"><span class="pagenxt"></span></a></li>
        </ul>
    </div>	
   
  
    
    </div>  
       
	</div> 
 
		<script type="text/javascript"> 
	      	$("#usual1 ul").idTabs(); 
	    </script>
	    
	    <script type="text/javascript">
			$('.tablelist tbody tr:odd').addClass('odd');
		</script>    
    </div>

	<div class="place" name="managerAddForm" style="display: none">
	    <span>位置：</span>
	    <ul class="placeul">
	    <li><a href="#">权限管理</a></li>
	    <li><a href="/euc/page/managerList.html">管理员</a></li>
	    <li><a href="#" id="managerOperator">添加</a></li>
	    </ul>
	    </div>
	    
	    <div class="formbody" name="managerAddForm" style="display: none">
	    
	    <div class="formtitle"><span>管理员信息</span></div>
	    
	    <ul class="forminfo">
		    <li>
		    	<label style="font-size:16px;margin-top:0px;">角色类型</label>
		    	 <div class="vocation" id="managerAddDiv">
				    <select class="select1" id="managerAddSelect">				    	
					    <!--<option value=""></option>-->
				    </select>
			    </div>
			    <input id="managerAddText" disabled	 type="text" class="dfinput" style="width:345px;"/>
		    </li>
		    <li id="managerHeader">
		    	<label style="font-size:16px;margin-top:-5px;">手机号</label>
		    	<input name="mobile" type="text" class="dfinput" value="" placeholder='请填写手机号码' style="width:345px;"/>
			</li>
		    <li>
		    	<label>&nbsp;</label>
		    	<input name="btnSave"  id="btnSave"  type="button" class="btn" value="确定"/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
		    	<input name="btnCancle"  id="btnCancle"  type="button" class="btn" value="取消"/>
		    </li>
	    </ul>
    </div>
<script type="text/javascript">

function updateManager(manager){	
	//alert(JSON.stringify(manager));
	var roleName = $("#managerAddSelect").val();	
	var mobile = $("INPUT[name='mobile']").val();
	if($.trim(mobile) == ''){
		alert("请输入手机号码");
		return;
	}
	var requestJson = {managerId:manager.id,roleName:roleName,mobile:mobile};
	$.ajax({
        url: '/euc/manager/update',
        data:JSON.stringify(requestJson),
        beforeSend: function(request) {
        	var accessToken = localStorage.getItem('accessToken');
            request.setRequestHeader("accessToken",accessToken );
        },
        dataType: 'JSON',
        async: true,
        contentType:'application/json;charset=utf-8',
        type: 'POST',
        success: function (datas, textStatus, response) {
        	//alert(JSON.stringify(datas));
        	if(datas.status == 0){
        		$("DIV[name='managerShowList']").show();
        		$("DIV[name='managerAddForm']").hide();	
        		search(pageBean.currentPage);
        	}else{
            	alert(datas.message);
        	}
        },
        error: function () {
        	alert("error");
        }
    });
	
}

function saveManager(){	
	var roleName = $("#managerAddSelect").val();
	if($.trim(roleName) == ''){
		alert("请选择角色类型");
		return;
	}	
	var mobile = $("INPUT[name='mobile']").val();
	if($.trim(mobile) == ''){
		alert("请输入手机号码");
		return;
	}
	var requestJson = {roleName:roleName,mobile:mobile};
	$.ajax({
        url: '/euc/manager/add',
        data:JSON.stringify(requestJson),
        beforeSend: function(request) {
        	var accessToken = localStorage.getItem('accessToken');
            request.setRequestHeader("accessToken",accessToken );
        },
        dataType: 'JSON',
        async: true,
        contentType:'application/json;charset=utf-8',
        type: 'POST',
        success: function (datas, textStatus, response) {        	
        	//alert(JSON.stringify(datas));
        	if(datas.status == 0){
        		$("DIV[name='managerShowList']").show();
        		$("DIV[name='managerAddForm']").hide();	
        		search(pageBean.currentPage);
        	}else{
            	alert(datas.message);
        	}
        },
        error: function () {
        	alert("error");
        }
    });
}

function cancle(){
	$("DIV[name='managerShowList']").show();
	$("DIV[name='managerAddForm']").hide();
}

$(document).ready(function(e) {	
	$("#btnSave").click(saveManager);	
	$("#btnCancle").click(cancle);
});
</script>
</body>
</html>
